<template>
    <div>
        <AlertBox ref="alertBox" />
        <div class="container" :style="{ 'background-image': `url(${imgurl})` }">
            <form method="POST" class="login-form">
                <h2>注册</h2>
                <input v-model="username" type="text" name="username" placeholder="用户名" />
                <input v-model="useraccount" type="text" name="useraccount" placeholder="账号" />
                <input v-model="password" type="password" name="password" placeholder="密码" />
                <button type="submit" @click.prevent="register">注册</button>
            </form>
        </div>
    </div>
</template>

<script>
import AlertBox from './AlertBox';
import axios from 'axios';

export default {
    components: {
        AlertBox
    },
    data() {
		return {
            imgurl: require('../images/bg.jpg'),
            username: '',
            useraccount: '',
            password: ''
		}
    },
    methods: {
        async register() {
            if (this.username === '') {
                this.$refs.alertBox.showAlertBox(2, '用户名不能为空');
				return;
            } else if (this.useraccount === '') {
				this.$refs.alertBox.showAlertBox(2, '账号不能为空');
				return;
			} else if (this.password === '') {
				this.$refs.alertBox.showAlertBox(2, '密码不能为空');
				return;
            }
            let resp = await axios.post('http://localhost:3000/signup', {
                username: this.username,
				useraccount: this.useraccount,
				password: this.password
            });
            let ret = resp.data;
			this.$refs.alertBox.showAlertBox(ret.statusCode, ret.message);
			if (ret.statusCode === 0) {
				window.setTimeout(() => {
					this.$router.push('/login');
				}, 1000);
			}
        }
	},
	created() {
		document.title = '注册';
	}
}
</script>

<style scoped>
.container {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
}
.login-form {
	width: 300px;
	height: 300px;
	display: flex;
	flex-direction: column;
	padding: 40px;
	text-align: center;
	position: relative;
	z-index: 100;
	background: inherit;
	border-radius: 18px;
	overflow: hidden;
}
.login-form::before {
	content: "";
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	position: absolute;
	top: -10px;
	left: -10px;
	overflow: hidden;
	background: inherit;
	box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.25);
	z-index: -1;
	filter: blur(6px);
}
.login-form h2 {
	font-weight: 400;
	color: #3d5245;
	margin: 20px auto;
}
.login-form input,
.login-form button {
	margin: 6px 0;
	height: 36px;
	border: none;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 4px;
	padding: 0 14px;
	color: #3d5245;
	outline: none;
}
.login-form input::placeholder {
	color: #3d5245;
}
.login-form button {
	margin-top: 24px;
	background-color: rgba(57, 88, 69, 0.4);
	color: white;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	transition: 0.4s;
}
.login-form button:hover {
	background-color: rgba(12, 80, 38, 0.67);
}
.login-form button::before,
.login-form button::after {
	content: "";
	display: block;
	width: 80px;
	height: 100px;
	background: rgba(179, 255, 210, 0.5);
	opacity: 0.5;
	position: absolute;
	left: 0;
	top: 0;
	transform: skew(-15deg);
	filter: blur(30px);
	overflow: hidden;
	transform: translateX(-100px);
}
.login-form button::after {
	width: 40px;
	background: rgba(179, 255, 210, 0.3);
	left: 60px;
	filter: blur(5px);
	opacity: 0;
}
.login-form button:hover::before {
	transition: 1s;
	transform: translateX(320px);
	opacity: 0.7;
}
.login-form button:hover::after {
	transition: 1s;
	transform: translateX(320px);
	opacity: 1;
}
</style>